<template>
    <div class="windowsLog1-container">
        
        <!-- 搜索框 -->
        <div class="filter-container">
            <el-button
                v-waves
                class="filter-item"
                type="primary"
                size="medium"
                icon="el-icon-refresh"
                @click="fetchData"
            >刷新</el-button>
        </div>

        <!-- 表格 -->
        <!-- :header-cell-style="{background:'#f1f1f1'}" -->
        <el-table
            :show-header="true"
            height="250"
            v-loading="listLoading"
            :data="list"
            fit
            highlight-current-row
            style="width: 100%;flex-grow: 1;overflow: auto;"
            @current-change="handleCurrentChange"
        >
            <el-table-column align="center" label="ID" width="80">
                <template slot-scope="scope">{{ scope.$index+1 }}</template>
            </el-table-column>

            <!-- 事件ID -->
            <el-table-column width="100px" align="center" label="Event ID">
                <template slot-scope="scope">
                    <a class="btn-show" @click="showDetail(scope.row)">{{ scope.row.RecordNumber }}</a>
                </template>
            </el-table-column>

            <!-- 级别 -->
            <el-table-column width="100px" align="center" label="Level">
                <template slot-scope="scope">
                    <span>{{ scope.row.Type }}</span>
                </template>
            </el-table-column>

            <!-- 用户 -->
            <el-table-column width align="center" label="User">
                <template slot-scope="scope">
                    <span>{{ scope.row.User ? scope.row.User : '-'  }}</span>
                </template>
            </el-table-column>

            <!-- 记录时间 -->
            <el-table-column width align="center" label="Logged">
                <template slot-scope="scope">
                    <span>{{ scope.row.TimeWritten }}</span>
                </template>
            </el-table-column>

            <!-- 关键字 -->
            <!-- <el-table-column width align="center" label="Keywords">
                <template slot-scope="scope">
                    <span>{{ scope.row.ComputerName }}</span>
                </template>
            </el-table-column> -->

            <!-- 计算机 -->
            <el-table-column width align="center" label="Computer">
                <template slot-scope="scope">
                    <span>{{ scope.row.ComputerName }}</span>
                </template>
            </el-table-column>

            <el-table-column width="120px" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="primary" 
                    plain
                    @click="showDetail(scope.row)">详情</el-button>
                </template>
            </el-table-column>
            
        </el-table>

        <!-- 分页 -->
        <!-- <pagination
            v-show="total>=0"
            :total="total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            @pagination="fetchData"
        /> -->

        <!-- 详情 -->
        <el-dialog title="详情" :visible.sync="dialogFormVisible">
            <el-form :model="form" label-position="left">

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="Event ID:" >
                                {{ form.RecordNumber }}
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="Level:" >
                                {{ form.Type }}
                            </el-form-item>
                        </div>
                    </el-col>

                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="User:" >
                                {{ form.User }}
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="Logged:" >
                                {{ form.TimeWritten }}
                            </el-form-item>
                        </div>
                    </el-col>

                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="Keywords:" >
                                {{ form.Keywords }}
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label="Computer:" >
                                {{ form.ComputerName }}
                            </el-form-item>
                        </div>
                    </el-col>

                </el-row>

                <el-row :gutter="20">
                    <!-- InsertionStrings/Message -->
                    <div contenteditable="false" class="cls-textarea" v-html="replaceAll(form.Message)">
                        <!-- {{ form.Message }} -->
                    </div>
                </el-row>
                
            </el-form>
            <!-- <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div> -->
        </el-dialog>

    </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
// import { mapGetters } from 'vuex'
import waves from "@/directive/waves/index.js"; // 水波纹指令
// import elDragDialog from '@/directive/el-drag-dialog' //拖动 base on element-ui
import { getList } from "@/api/windows";
import { formatStrTime, parseTime } from "@/utils";

export default {
    name: "windowsLog1",
    components: {
        Pagination
    },
    directives: {
        waves
        // elDragDialog// 拖动
    },
    filters: {
        statusFilter(status) {
            const statusMap = {
                0: "info",
                1: "danger",
                2: "success"
            };
            return statusMap[status];
        }
    },
    filters: {
        formatStrTime,
        parseTime
    },
    data() {
        return {
            list: null,
            // 数据总条数
            total: 0,
            listLoading: true,
            // 分页信息
            listQuery: {
                pageNum: 1,
                pageSize: 10,
                importance: undefined,
                title: undefined,
                type: undefined,
                sort: "+id",
                location: "",
                logType: ''
            },
            dialogTableVisible: false,
            currentRow: null,
            // ******************************** 详情弹窗S ********************************
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
            // ******************************** 详情弹窗E ********************************
        };
    },
    // computed: {
    //   ...mapGetters([
    //     'name',
    //     "locations"
    //   ])
    // },
    created() {
        this.listQuery.logType = this.$route.meta.logType;// 数据库选择
        this.fetchData();
    },
    methods: {
        /**
         * 请求后台数据
         */
        fetchData() {
            this.listLoading = true;
            getList(this.listQuery).then(response => {

                // 分页信息
                // let pageInfo = response.data;
                // 总数
                // this.total = pageInfo.total;
                // 分页数据
                // this.list = pageInfo.data;

                this.list = response.data;
                this.listLoading = false;
            });
        },
        /**
         * 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性
         */
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        showDetail(row){
            this.dialogFormVisible = true;
            this.form = row;
        },
        replaceAll(str){
            if(str){
                return str.replace(/\\n/g,"</br>")
            }else{
                return str;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.windowsLog1 {
    &-container {
        padding: 10px;
        // margin: 30px;
        // background-color: #f0f2f5;
        // height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
.windowsLog1-container {
    .filter-container {
        margin-bottom: 5px;
        background: #fff;
        padding: 20px 20px;
    }
    .cls-textarea{
        .el-textarea__inner{
            background-color: #f5f7fa;border: none;
        }
    }
}
</style>

<style lang="scss">
.windowsLog1-container {
    
    .btn-show{
        color: #3a8ee6;
    }
    .btn-show:hover{
        color: #3a8ee6c2;
        text-decoration: underline;
    }

    .cls-textarea{
        background-color: #f5f7fa;
        border: none;
        /* width: 400px; */
        min-height: 260px;
        max-height: 300px;
        margin-left: auto;
        margin-right: auto;
        outline: 0;
        /* border: 1px solid #a0b3d6; */
        // font-size: 12px;
        word-wrap: break-word;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 10px;
    }
    
}
</style>
